import { createFromIconfontCN } from "@ant-design/icons-vue";
import { defineComponent, h, type HTMLAttributes } from "vue";
import { scriptUrl } from "./config.json";

const Icon = createFromIconfontCN({ scriptUrl });

const CustomIcon = defineComponent({
  name: "custom-icon",
  props: {
    type: { required: true, type: String },
    spin: { type: Boolean },
    rotate: { type: Number },
  },
  setup(props) {
    return () => h(Icon, { type: props.type, spin: props.spin, rotate: props.rotate });
  },
});

export default CustomIcon;

export const renderCustomIcon = (type: string, props?: HTMLAttributes) => h(CustomIcon, { ...props, type });
export { renderCustomIcon as hci };

export const imgIcon = (src: string, size: string | number = 14, props?: HTMLAttributes) => {
  const sizeValue = typeof size === "string" ? size : size + "px";
  return h("img", { src, draggable: false, alt: "", ...props, width: sizeValue, height: sizeValue });
};
